
<!DOCTYPE html>
<html lang="en">

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta https-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table {
            width: 100%;
            margin: 100px auto;
            border-collapse: collapse;
            text-align: center;
        }

        td,
        th {
            border: 1px solid #333;
        }

        thead tr {
            height: 40px;
            background-color: #ccc;
        }
    </style>
</head>

<body>
    <table cellspacing="0">
        <thead>
            <tr>
                <th>订单时间</th>
                <th>订单名称</th>
                <th>订单价格</th>
<!--                <th>商品图片</th>-->
                <th>订单号</th>
                <th>收货人姓名</th>
                <th>手机号</th>
                <!--<th>位置</th>-->
                <th>订单状态</th>
                <th>打印状态</th>
                <th>发货状态</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
    <script>
        // 里面的数据是动态的，需要用js动态生成
        // 所有的数据都是放在tbody里免得行里面的
        // 因为行很多，需要循环创建多个行（应对多个人）
        // 每个行里面又有多个单元格（对应里面的数据），继续使用循环创建多个单元格，并且把数据存入里面（双重for循环）
        // 最后一列单元格式删除，需要单独创建单元格



        // 1.先去准备好学生的数据

        var storeId = getQueryVariable("storeId");
        var sort = getQueryVariable("sort"); // 排序字段
        var order = getQueryVariable("order"); // asc/desc
        var pageIndex = getQueryVariable("pageIndex"); //
        var pageSize = getQueryVariable("pageSize"); //
        var printMachineSn = getQueryVariable("printMachineSn"); // 打印机编号
        console.log(pageIndex);
        console.log(pageSize);
        console.log(printMachineSn);
        if (pageIndex == false) {
            pageIndex = 1;
        }
        if (pageSize == false) {
            pageSize = 1000;
        }
           $.ajax({
            type: "GET",
            url: "https://admin-api.yihuashijia.shop/manager/order/getOrderListBySender?storeId=" + storeId + "&sort="+sort+"&order="+order+"" +
                "&pageIndex=" + parseInt(pageIndex) + "&pageSize=" + parseInt(pageSize),
            data: {username:$("#username").val(), content:$("#content").val()},//请求的参数
            dataType: "json",//以json格式返回的数据，不是json就把此行去掉
            success: function(data){
                console.log(data.result.records);
                var s = data.result.records;
                for (var i = 0; i < s.length; i++) {
                    var datas = [];
                    var orderStatus ;
                    if(s[i].orderStatus == 'UNPAID') {
                        orderStatus = '未付款';
                    }
                    if(s[i].orderStatus == 'PAID') {
                        orderStatus = '已付款';
                    }
                    if(s[i].orderStatus == 'UNDELIVERED') {
                        orderStatus = '待发货';
                    }
                    if(s[i].orderStatus == 'DELIVERED') {
                        orderStatus = '已发货';
                    }
                    if(s[i].orderStatus == 'COMPLETED') {
                        orderStatus = '已完成';
                    }
                    if(s[i].orderStatus == 'TAKE') {
                        orderStatus = '待核验';
                    }
                    if(s[i].orderStatus == 'CANCELLED') {
                        orderStatus = '已取消';
                    }

                    if (orderStatus == undefined) {
                        orderStatus = '已取消';
                    }

                    var temp = s[i].sn.slice(18, s[i].sn.length);
                    var obj = {
                        createTime: s[i].createTime,
                        orderName: s[i].storeName,
                        orderPrice: s[i].flowPrice + "元",
                        // orderPicture: s[i].flowPrice + "元",

                        sn: s[i].sn,
                        name:s[i].consigneeName,
                        mobile:s[i].consigneeMobile,
                        // location:s[i].consigneeAddressPath +'_'+ s[i].consigneeDetail,
                        // cancelReason:s[i].cancelReason,
                        orderStatus: orderStatus,
                        printStatus: s[i].printFlag == true ? '已打印' : '未打印', // 打印状态
                        sendStatus: s[i].sendFlag == true ? '已发送' : '未发送' // 发送短信状态
                    };

                    console.log(obj);
                    datas.push(obj);


                    // 2、往tbody里面创建行：有几个人（通过数组的长度）我们就能创建几行
                    var tbody = document.querySelector('tbody');
                    for (var t = 0; t < datas.length; t++) { //外面的for循环管行  tr
                        // 1、创建tr行
                        var temp = datas[t];

                        var tr = document.createElement('tr')
                        tbody.appendChild(tr);
                        // 2、行里面创建单元格（跟数据有关系的3个单元格）  td  单元格的数量取决于每个对象里面的属性个数   for循环循环遍历datas[i]
                        for (var k in datas[t]) { //里面for循环管列  td
                            var td = document.createElement('td');
                            // node.appendChild(child)
                            // 把对象里面的属性值datas[i][k]给了td
                            // console.log(datas[i][k]);
                            td.innerHTML = datas[t][k];
                            if (datas[t][k] == "已完成") {
                                td.style.background="red";
                            }
                            if (datas[t][k] == "已发货") {
                                td.style.background="green";
                            }

                            if (datas[t][k] == "已打印") {
                                td.style.background="red";
                            }
                            if (datas[t][k] == "未打印") {
                                td.style.background="green";
                            }

                            if (datas[t][k] == "已发送") {
                                td.style.background="red";
                            }
                            if (datas[t][k] == "未发送") {
                                td.style.background="green";
                            }
                            tr.appendChild(td);
                        }
                        // 3、创建有删除2个字的单元格
                        var td = document.createElement('td');

                        var sn = temp.sn;
                        td.innerHTML='' +
                            '<a href="#" onclick="operationStatus(\''+ sn +'\', \'COMPLETED\')">已完成</a>'+
                            '\n\n<a href="#" onclick="sendSms(\''+ sn +'\')">发送短信</a>'+
                            '\n\n<a href="#" onclick="printOrder(\''+ sn +'\', \'' + printMachineSn + '\')">打印订单</a>';
                        tr.appendChild(td);
                    }
                }


            }
        });

    // 更新订单状态
    function operationStatus(order, status) {

        console.log(order, status);
        $.ajax({
            type: "GET",
            url: "https://admin-api.yihuashijia.shop/manager/order/updateOrderList?status=" + status + "&sn=" +order,
            data: {username:$("#username").val(), content:$("#content").val()},//请求的参数
            dataType: "json",//以json格式返回的数据，不是json就把此行去掉
            success: function(data) {
                console.log(data);
                location.reload();
            }
        })
    };

        function getQueryVariable(variable)
        {
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i=0;i<vars.length;i++) {
                var pair = vars[i].split("=");
                if(pair[0] == variable){return pair[1];}
            }
            return(false);
        }

    // 打印订单
    function printOrder(sn, printMachineSn) {
        console.log("打印当前订单" + sn);
        $.ajax({
            type: "GET",
            url: "https://admin-api.yihuashijia.shop/manager/order/printOrder?orderSn=" + sn + "&printMachineSn=" + printMachineSn,
            data: {username:$("#username").val(), content:$("#content").val()},//请求的参数
            dataType: "json",//以json格式返回的数据，不是json就把此行去掉
            success: function(data) {
                console.log(JSON.parse(data.result).ret);
                if (JSON.parse(data.result).ret != 0) {
                    alert(data.result);
                }
            }
        })
    }


        // 发送短信到达通知
        function sendSms(sn) {
            console.log("打印当前订单" + sn);
            $.ajax({
                type: "GET",
                url: "https://admin-api.yihuashijia.shop/manager/order/sendSms?orderSn=" + sn,
                data: {username:$("#username").val(), content:$("#content").val()},//请求的参数
                dataType: "json",//以json格式返回的数据，不是json就把此行去掉
                success: function(data) {
                    console.log(JSON.parse(data.result).ret);
                    if (JSON.parse(data.result).ret != 0) {
                        // alert(data.result);
                    }
                }
            })
        }




    </script>
</body>

</html>
